<template>
	<view style="background-color:#F6F6F6 ;min-height: 100vh;">
		<view class="tabs">
			<liuyuno-tabs
				:tabData="tabs"
				:activeIndex="selectTabIndex"
				:config="{
					color: '#999',
					activeColor: '#FE7904',
					underLineColor: '#FE7904'
				}"
				@tabClick="selectTab"
			/>
		</view>
		<view style="margin-top: 20rpx;">
			<view class="no-order" v-if="orderlist.length === 0">暂无订单</view>
			<view v-else class="swiper-item">
				<view v-for="item in orderlist" :key="item.id" class="order-item-card" @click="orderdetail(item.Id)">
					<view class="order-no-top">
						<view class="order-no">{{ item.orderNo }}</view>
						<view class="order-status">{{ item.statusName }}</view>
					</view>
					<view class="order-item-top">
						<view class="player-header"><view :style="{ backgroundImage: 'url( ' + item.levelImage + ' )' }" class="player-header-img"></view></view>
						<view class="play-order-info">
							<view class="play-order-info-item">
								<view class="title">VIP名称</view>
								<view class="content">{{ item.levelName }}</view>
							</view>
							<view class="play-order-info-item">
								<view class="title">购买日期</view>
								<view class="content">{{ item.purchaseDate | timeFormat('yyyy-mm-dd') }}</view>
							</view>
							<view class="play-order-info-item">
								<view class="title">失效日期</view>
								<view class="content">{{ item.expiredDate | timeFormat('yyyy-mm-dd') }}</view>
							</view>
						</view>
					</view>
					<view class="order-price">
						<text class="order-price-unit">￥</text>
						<text>{{ item.fee | moneyFormat(2) }}</text>
					</view>
					<view class="order-operation-container">
						<view class="order-btn zhifu-btn" v-if="item.status == 10" @click.stop="gopayorder(item.orderNo, item.fee)">去支付</view>
						<view class="order-btn quxiao-btn" v-if="item.status == 10" @click.stop="cancelorder(item.orderNo)">取消订单</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { isLogin, toLogin, formatDate, successToShow } from '@/config/common.js';
import { getMyVipOrderList, cancelVipOrder ,vipOrderList} from '@/constant/vip.js';
import liuyunoTabs from '@/components/liuyuno-tabs/liuyuno-tabs.vue';
export default {
	components: { liuyunoTabs },
	data() {
		return {
			selectStarIndex: 0,
			selectTabIndex: 0,
			orderlist: [],
			isShowEvalauteModal: false,
			isShowRefundModal: false,
			tabs: [
				{
					id: 1,
					name: '全部',
					status: ''
				},
				{
					id: 2,
					name: '待付款',
					status: '10'
				},
				{
					id: 3,
					name: '已完成',
					status: '30'
				}
			],
			query_filter: {
				status: '',
				customerId: uni.getStorageSync('customerId'),
				pageNum: 1,
				pageSize: 10
			},
			orderNo: ''
		};
	},
	onLoad: function(option) {
		if (isLogin()) {
			this.getOrderList();
		} else {
			toLogin();
		}
	},
	onReachBottom() {
		this.query_filter.pageNum++;
		this.getOrderList();
	},
	onPullDownRefresh() {
		this.query_filter.pageNum = 1;
		this.getOrderList();
	},
	methods: {
		clickStar(val) {
			this.selectStarIndex = val;
			this.commentInfo.Star = val + 1;
		},
		cancelPopup() {
			this.isShowEvalauteModal = false;
			this.isShowRefundModal = false;
			this.selectStarIndex = 0;
		},
		confirmPopup() {
			this.isShowEvalauteModal = false;
			this.isShowRefundModal = false;
		},
		async selectTab(index) {
			// this.tabs = this.tabs.map(e => {
			// 	e.active = false;
			// 	return e;
			// });
			//this.tabs[index].active = true;
			this.selectTabIndex = index;
			this.query_filter.status = this.tabs[index].status;
			this.query_filter.pageNum =1;
			let res = await vipOrderList(this.query_filter);
			this.orderlist = res.data.list;
		},
		async getOrderList() {
			//订单列表
			let res = await vipOrderList(this.query_filter);
			uni.stopPullDownRefresh();
			let data=res.data.list
			if (this.query_filter.pageNum > 0) {
				for (let i = 0; i < data.length; i++) {
					let obj = data[i];
					this.orderlist.push(obj);
				}
			} else {
				this.orderlist = data;
			}
		},
		async gopayorder(orderNo, orderAmount) {
			//支付
			uni.navigateTo({
				url: '/pages/payorder/index?orderNo=' + orderNo + '&orderType=60' + '&orderAmount=' + orderAmount
			});
		},
		async cancelorder(orderId) {
			//取消订单
			let that = this;
			uni.showModal({
				title: '',
				content: '确定取消吗',
				success: function(res) {
					if (res.confirm) {
						that.confirmCancelOrder(orderId);
					}
				}
			});
		},
		async confirmCancelOrder(orderId) {
			await cancelVipOrder({
				orderNo: orderId,
				type: 1
			});
			successToShow('取消成功', res => {
				this.query_filter.pageNum = 1;
				this.orderlist=[]
				this.getOrderList();
			});
		},
		orderdetail(orderId) {
			// uni.navigateTo({
			// 	url: './detail?orderId=' + orderId
			// })
		}
	}
};
</script>

<style>
@import url('../../../css/common.css');
</style>
<style lang="scss">
.tabs {
	// height: 60rpx;
	line-height: 60rpx;
	font-size: 32rpx;
	display: flex;
	background-color: #fff;
}

.no-order {
	height: 240rpx;
	line-height: 240rpx;
	text-align: center;
	background-color: #fff;
	color: #acacac;
}

.swiper-item {
	padding: 20rpx 30rpx;
}

.order-item-card {
	background-color: #ffffff;
	padding: 30rpx;
	padding-bottom: 10rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	// box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
	.order-no-top {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		color: $main-text-color-gray-33;
		.order-status {
			color: $main-text-color-main-orange;
		}
	}
	.order-item-top {
		display: flex;
		.player-header {
			width: 120rpx;
			margin-right: 20rpx;
			&-img {
				border-radius: 12rpx;
				width: 120rpx;
				height: 120rpx;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
			}
		}

		.play-order-info {
			color: $main-text-color-gray-33;
			font-family: 'SourceHanSansCN-Regular';
			font-size: $main-text-size-28;

			&-item {
				margin-bottom: 16rpx;
				display: flex;
				.title {
					width: 140rpx;
					min-width: 140rpx;
					color: $main-text-color-gray-black;
				}
				.content {
					width: 100%;
					word-wrap: break-word;
				}
			}
		}
	}

	.order-price {
		color: $main-text-color-main-orange;
		font-size: $main-text-size-32;
		text-align: right;
		margin-bottom: 20rpx;
		&-unit {
			font-size: $main-text-size-20;
		}
	}

	.order-operation-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		margin-bottom: 20rpx;
	}
}

.play-order-info-item .title::after {
	content: '：';
}
.order-operation-container:empty {
	display: none;
}
</style>
